<template>
    <div class="app-main" style="background: #F8F8F8;">
        <myheader title="用户资料完善"/>
        <div class="icon">
            <img :src="this.$basePath + '/ccCustomerApiController/previewPhoto?fileId=' + form.photoUrl"/>
        </div>
        <div class="field_contanier">
            <mt-field label="姓名" placeholder="请输入姓名" v-model="form.customerName"/>
            <mt-field label="手机号码" placeholder="请输入手机号码" type="tel" v-model="form.customerPhone"/>
            <mt-field label="身份证" placeholder="请输入身份证" type="number" v-model="form.customerCard"/>
            <div @click="select.shwoCommunity = true">
                <mt-field label="小区" placeholder="请选择小区" v-model="temp.communityName" :readonly='true'/>
            </div>
            <div @click="select.showBuilding = true">
                <mt-field label="楼栋" placeholder="请选择楼栋" v-model="temp.buildingName" :readonly='true'/>
            </div>
        </div>
        <mt-button type="primary" class="submit" @click="submit">确定</mt-button>


        <mt-popup v-model="select.shwoCommunity" position="bottom" style="height: 50vh;">
            <el-alert title="请填写正确的小区以后供后期刷脸开门使用" type="info" class="alert-title" show-icon
                      :closable="false"/>
            <mt-search v-model="temp.searchCommunityName" cancel-text="">
                <div v-for="item in result.communityResult" :key="item.communityNo" class="search-cell-item"
                     @click="selectCommunity(item.communityNo,item.communityName)">
                    <mt-cell :title="item.communityName"/>
                </div>
            </mt-search>
        </mt-popup>
        <mt-popup v-model="select.showBuilding" position="bottom" style="height: 50vh;">
            <el-alert title="请填写正确的小区以后供后期刷脸开门使用" type="info" class="alert-title" show-icon
                      :closable="false"/>
            <mt-search v-model="temp.searchBuildingName" cancel-text="">
                <div v-for="(item,index) in result.buildingResult" :key="item.buildingNo" class="search-cell-item"
                     @click="selectBuilding(item.buildingNo,item.buildingName)">
                    <mt-cell :title="item.buildingName"/>
                </div>
            </mt-search>
        </mt-popup>
    </div>
</template>

<script>
    import localstore from '../../utils/localstore'

    export default {
        data() {
            return {
                form: {
                    photoUrl: this.$route.query.imageUrl,
                    customerName: '',
                    customerPhone: '',
                    customerCard: '',
                    communityNo: '',
                    buildingNo: ''
                },
                temp: {
                    communityName: '',
                    buildingName: '',
                    searchCommunityName: '',
                    searchBuildingName: ''
                },
                select: {
                    shwoCommunity: false,
                    showBuilding: false
                },
                result: {
                    communityResult: [],
                    buildingResult: []
                }
            };
        },
        methods: {
            submit(){
                //判断是否验证
                if (this.validata() == false)return
                console.log(this.form)
                this.$ajax.JSONPost('/ccCustomerApiController/add/' + localstore.get("openid"), this.form, result => {
                    let instance = this.$toast({
                        message: '完善成功',
                        iconClass: 'el-icon-success',
                    });
                    setTimeout(() => {
                        instance.close();
                        //跳转到首页
                        this.$router.push({
                            name: 'index',
                            replace: true,
                            params: {isRegist: true}
                        })

                    }, 1000);
                });


            },
            selectCommunity(communityNo, communityName){
                this.form.communityNo = communityNo
                this.temp.communityName = communityName
                this.select.shwoCommunity = false
                //选择之后将单元楼的名称和编号清空
                this.temp.buildingName = ''
                this.form.buildingNo = ''
            },
            selectBuilding(buildingNo, buildingName){
                this.form.buildingNo = buildingNo
                this.temp.buildingName = buildingName
                this.select.showBuilding = false
            },
            validata(){
                for (let key in this.form) {
                    let pro = this.form[key]
                    if (!pro || pro == "") {
                        this.$imessage.warning("必须填完所有选项!")
                        return false
                    }
                }
                return true
            }
        },
        watch: {
            'temp.searchCommunityName'(communityName){
                if (communityName == '')return
                this.$ajax.FORMPost("/mdmCommunityApiController/findAll", {communityName}, (result) => {

                    this.result.communityResult = result.list
                })
            },
            'temp.searchBuildingName'(buildingName){
                this.$ajax.FORMPost("/mdmBuildingApiController/findAll", {
                    buildingName,
                    communityNo: this.form.communityNo
                }, (result) => {

                    this.result.buildingResult = result.list
                })
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
    .icon {
        height: 170px;
        background: #fff;
    }

    .icon > img {
        margin-left: 132px;
        margin-top: 25px;
        display: inline;
        width: 110px;
        height: 110px;
        border-radius: 5em;
        border: 1px solid #999;
    }

    .field_contanier {
        margin-top: 10px;
        color: #999;
    }

    .mint-cell-wrapper {
        border-bottom: 1px solid #eee;
        height: 60px;
    }

    input {
        text-align: right;
    }

    input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #aab2bd;
        /* placeholder字体大小  */
        font-size: 12px;
    }

    .submit {
        width: 230px;
        height: 50px;
        position: absolute;
        left: 72px;
        bottom: 30px;
    }

    .search-title {
        width: 375px;
        text-align: center;
        margin-top: 20px;
        color: #3b8ded;
        font-size: 14px;
    }

    .mint-searchbar {
        position: static;
    }

    .mint-search-list {
        position: static;
        padding-top: 0px
    }

    .mint-searchbar-core {
        text-align: left;
        margin-left: 8px;
    }

    .mint-cell {
        border-bottom: 1px solid #eee;
        height: 50px;
        font-size: 15px;
    }

    .search-cell-item .mint-cell-text {
        font-size: 14px;
        padding-left: 20px;
    }

    .alert-title {
        width: 375px;
        text-align: center;
    }
</style>
